<template>
  <div>
    <div>
      <el-form :inline="true" size="mini">
        <el-form-item label="讲师名称：">
          <el-input v-model.trim="map.lecturerName"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model.trim="map.lecturerMobile"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="map.aduitStatus" class="auto-width" clearable filterable placeholder="状态"
                     style="width: 85px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="map.statusId" class="auto-width" clearable filterable placeholder="状态"
                     style="width: 85px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon='el-icon-search' type="primary" @click="handleSearch">查询</el-button>
          <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="ctrl.loading" size="medium" :data="list" stripe border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column label="手机号" width="100">
          <template slot-scope="scope">
            <!--            <el-button v-has="'/user/pc/lecturer/view'" type="text" @click="handleView(scope.row.id)">{{scope.row.lecturerMobile}}</el-button>-->
            <el-button type="text">{{ scope.row.lecturerMobile }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="lecturerName" label="讲师名称" width="200">
        </el-table-column>
        <el-table-column prop="lecturerEmail" label="邮箱" width="200">
        </el-table-column>
        <el-table-column label="分成比例" width="100">
          <template slot-scope="scope">
            {{ scope.row.lecturerProportion }}%
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          prop="statusId"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.statusId"
              @change="handleChangeStatus($event, scope.row)"
              :active-value="0"
              :inactive-value="1"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="禁用"
              inactive-text="正常">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          prop="auditStatus"
          width="150"
          align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditStatus === 0" type="brandColor">待审核</el-tag>
            <el-tag v-if="scope.row.auditStatus === 1" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.auditStatus === 2" type="danger">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <ul class="list-item-actions">
              <li>
                <el-button type="success" @click="handleEdit(scope.row.id)" size="mini">修改</el-button>
                <el-button type="primary" size="mini">审核</el-button>
              </li>
            </ul>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      style="float: right;margin-top: 20px; margin-bottom: 22px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :page-sizes="[20, 50, 100, 200, 500, 1000]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount">
    </el-pagination>
    <edit :visible="ctrl.dialogVisible" :formData="formData" :lecturerExt="lecturerExt" :title="ctrl.dialogTitle"
          @close-callback="closeCllback"></edit>
  </div>
</template>

<script>
import Edit from './edit'

let tlist = [
  {
    id: 1,
    lecturerMobile: "8888888",
    lecturerName: "",
    lecturerEmail: "",
    statusId: 1,
    aduitStatus: 1,
    lecturerProportion: 50
  }, {
    id: 2,
    lecturerMobile: "123456789",
    lecturerName: "",
    lecturerEmail: "",
    statusId: 1,
    lecturerProportion: 50,
    aduitStatus: 1
  }
]
export default {
  name: "index",
  components: {Edit},
  created() {
    this.list = tlist;
  },
  data() {
    return {
      list: [],
      ctrl: {
        loading: false,
        dialogVisible: false,
        proportionDialogVisible: false,
        viewVisible: false,
        lecturerExt: {},
        dialogTitle: "测试"
      },
      page: {
        beginPageIndex: 1,
        pageCurrent: 1,
        endPageIndex: 8,
        pageSize: 20,
        totalCount: 0,
        totalPage: 0
      },
      map: {},
      formData: {
        id: 2,
        lecturerMobile: "123456789",
        lecturerName: "",
        lecturerEmail: "",
        statusId: 0,
        lecturerProportion: 50,
        aduitStatus: 1
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      lecturerExt: {},
    }
  },
  methods: {
    handleChangeStatus(caback, row) {
      let statusId = row.statusId;
      const title = {0: '禁用', 1: '启用'}
      this.$confirm(`确定要${title[statusId]}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeStatus(row.id, statusId);
        this.reload()
      }).catch(() => {
        row.statusId = (caback + 1) % 2;
        this.reload()
      })
      console.log(statusId);
    },
    changeStatus(id, statusId) {
      this.ctrl.loading === true;
    },
    reload() {
      this.map = {}
      this.formData = {}
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
    },
    handleCurrentChange(val) {
      this.page.pageCurrent = val
      // console.log(`当前页: ${val}`)
    },
    // 关闭弹窗回调
    closeCllback() {
      this.ctrl.viewVisible = false;
      this.ctrl.proportionDialogVisible = false;
      this.ctrl.dialogVisible = false;
      this.reload()
    },
    handleEdit(value) {
      // this.ctrl.loading = true;
      this.ctrl.dialogVisible = true;
      console.log(value);
    },
    handleSearch() {
      console.log(JSON.stringify(this.map));
    },
    handleReset() {
      this.reload()
    }
  }
}
</script>

<style scoped>
.list-item-actionsul ul, li {
  list-style: none;
}
</style>
